<template>
    <div class="vip">
      <div class="vip-content">
        <div class="vip-title">公告</div>
        <div class="vip-content-box">
          <div class="vip-content-title">公告</div>
          <div class="title-line">
            <div class="line-txt">详情</div>
          </div>
          <div class="table-box">
       
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import { reactive } from "vue";
  const formInline = reactive({
    user: "",
    region: "",
    date: "",
    date1: "",
    date2: "",
  });
  
  const onSubmit = () => {
    console.log("submit!");
  };
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  </script>
      
      <style scoped lang="less">
  .vip {
    padding: 1.5rem;
    box-sizing: border-box;
    .vip-content {
      width: 80rem;
      margin: 0 auto;
      // background: #fcf;
      padding: 2rem;
      box-sizing: border-box;
      .vip-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.125rem;
        color: #000000;
        line-height: 1.125rem;
        text-align: left;
        font-style: normal;
      }
      .vip-content-box {
        margin-top: 1.5rem;
        background: #fff;
        padding: 1.5rem;
        box-sizing: border-box;
        border-radius: 1rem;
        .vip-content-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 1.625rem;
          color: #000000;
          text-align: left;
          font-style: normal;
        }
        .title-line {
          border-bottom: 1px solid rgba(0, 0, 0, 0.85);
          margin: 2rem 0;
          .line-txt {
            width: 86px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background: rgba(0, 0, 0, 0.85);
            border-radius: 8px 8px 0px 0px;
          }
        }
        .vip-cards {
          // display: grid;
          // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          // gap: 2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  </style> 